<template>
	<view style="width: 95%;margin: 0 auto;padding: 20px 0;">
		<view style="text-align: center;margin: 20px 0;">
			<h3>{{ title }}</h3>
		</view>
		<scroll-view scroll-y style="height: calc(100vh - var(--window-bottom) - 300px);">
			<u-grid :border="false" col="4" align="left">
				<u-grid-item v-for="(item,index) in list" :key="index" @click="selected(index)">
					<view style="padding: 20px 0;">
						<tn-button
							:backgroundColor="selectedVal === index ? selectButtonStyle.backgroundColor : noSelectButtonStyle.backgroundColor"
							:fontColor="selectedVal === index ? selectButtonStyle.fontColor : noSelectButtonStyle.fontColor">{{item.name}}</tn-button>
					</view>
				</u-grid-item>
			</u-grid>
		</scroll-view>
		<u-button @click="submit" type="primary" shape="circle" style="margin-top: 20px;">确定</u-button>
	</view>
</template>

<script>
	export default {
		props: {
			popTypeName: {
				type: String,
				default: "",
				require: true
			},
			popTypeValue: {
				type: String,
				default: "",
				require: true
			},
			title: {
				type: String,
				default: ""
			},
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				selectedVal: 0,
				selectButtonStyle: {
					backgroundColor: "#288BF0",
					fontColor: "#FFFFFF"
				},
				noSelectButtonStyle: {
					backgroundColor: "#F1F1F1",
					fontColor: "#080808"
				}
			};
		},
		methods: {
			selected(index) {
				this.selectedVal = index
			},
			submit() {
				this.$emit("popStatus", false)
				this.$emit("submit", {
					popTypeName: this.popTypeName,
					popTypeValue: this.popTypeValue,
					val: this.list[this.selectedVal]
				})
			}
		}
	}
</script>

<style>
</style>